<template>
  <DetailStructure title="案例展示" first-sentence="专注地理信息，" second-sentence="面向政府、企业和高校提供一站式地理信息解决方案。" :bg="displayBg">

  </DetailStructure>

  <div class="display-container">
    <div class="head-title">
      成功案例
    </div>
    <ul class="display-wrapper">
      <li class="display" v-for="item in caseLists"  :key="title" @click="goPage(item.target)">
        <div class="borders">
          <div class="head">
            <span class="name">{{item.name}}</span>
          </div>
          <div class="requirement" v-if="item.caseContent">
            <img class="caseimg" :src="item.caseimg" alt="">
            <div class="content" v-html="item.caseContent"></div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script setup>
  import {reactive, ref} from 'vue';
  import displayBg from '@/assets/imgs/display/displayBg.jpg';
  import DetailStructure from "@/components/common/DetailStructure.vue";
  import {presentationList} from "@/utils/data.js";
  import {useRouter} from "vue-router";

  const caseLists = presentationList;

  // const content = `<p>1、精通HTML/Javascript/XML等技术；</p><p>2、精通JSP、Servlet、EJB等技术；</p><p>3、精通Struts、Spring、Hibernate等框架技术，熟悉Ajax、Web service技术；</p><p>4、熟悉关系数据库理论，熟练掌握SQL语言，精通Oracle数据库，熟悉SqlServer数据库。`
  const data = reactive({
    currIndex: "", //当前索引
    spanIndex: [], //索引数组
    arrIndex: "", //用于判断是否做索引数组找到当前索引。-1为找不到,0找到了。
    show2: false,
  })

  const router = useRouter();

  // 跳转页面
  const goPage = (target) => {
    router.push(target);
  }

  // function handleClick(index) {
  //   // 初始化三级导航，默认不显示。
  //   // 当前索引=index
  //   data.currIndex = index;
  //   // console.log("当前索引index", index);
  //   // 判断当前索引是否在索引数组spanIndex中。arrIndex的值只有两种结果，-1未找到。0找到了。
  //   data.arrIndex = data.spanIndex.indexOf(index);
  //   // console.log("arrIndex", data.arrIndex);
  //
  //   if (data.arrIndex == 0) {
  //     //arrIndex ==0，找到索引了，在索引数组spanIndex删除该索引,隐藏二级导航。
  //     data.spanIndex.splice(data.arrIndex, 1);
  //     data.show2 = false;
  //   } else {
  //     // arrIndex ==-1,没有找到，splice(-1,1)从spanIndex数组结尾处删除1个值，并将当前索引添加到索引数组spanIndex，show2为true，展示二级导航，
  //     data.spanIndex.splice(data.arrIndex, 1);
  //     data.spanIndex.push(index);
  //     data.show2 = true;
  //   }
  //   // console.log("索引数组", data.spanIndex);
  // }

  // 解决方案
</script>

<style lang="scss" scoped>

  .display-container{
    width: 100%;
    height: 100%;
    background: #eeeeee;
    .head-title{
      font-size: 35px;
      font-weight: bold;
      text-align: center;
      //padding: 20px 0;
      padding-top: 50px;
    }
    .display-wrapper{
      width: $maxWidth;
      margin: 0 auto;
      padding: 30px 0;
      column-count: 3;
      column-gap: 10px;
      //counter-reset: employment;
      .display{
        background: #ffffff;
        margin-bottom: 10px;
        padding: 20px;
        break-inside: avoid-column;
        .borders{
          .head{
            padding-bottom: 5px;
            margin-bottom: 10px;
            border-bottom: 1px solid #eeeeee;
            @include flex($row:space-between);
            .name{
              font-weight: bold;
              color: $themeColor;
            }
            .address{
              font-size: 15px;
            }
          }
          .requirement{
            .caseimg{
              width: 353px;
              height: 200px;
            }
            .content{
              font-size: 13px;
              text-indent: 1.5rem;

              p{
                text-align: left;
              }
            }
          }
        }

      }
      .display .borders:hover{
        box-shadow: $boxShadow;
        transform: scale(1.05);
        transition: 3s;
        cursor: pointer;
      }
    }
  }
</style>
